<template>
    <div class="order-refund-item" @click.stop="e => $emit('click', e)">
        <div class="order-refund-item-content">
            <van-image :width="90" :height="90" :radius="4" :src="item.imageUrl"/>
            <div class="order-refund-item-right">
                <div class="van-multi-ellipsis--l2 order-refund-item-name">{{item.name}}</div>
                <div class="order-item-refund-amount">
                    <span class="order-item-refund-amount-label">退款:</span>
                    <price :value="item.amount" color="#000" :size="16"/>
                </div>
                <div class="order-item-refund-amount" v-if="reason">
                    <span class="order-item-refund-reason-label">退款原因:</span><span>{{item.reason}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { Image } from "vant"
  import Price from "../Price"

  export default {
    name: "OrderRefundItem",
    components: {
      Price,
      [Image.name]: Image,
    },
    props: {
      item: Object,
      reason: Boolean,
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-refund-item {
        padding: 0 9px 9px 9px;

        .order-refund-item-content {
            display: flex;

            .van-image {
                box-shadow: 0 8px 12px #ebedf0;
            }

            .order-refund-item-right {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-left: 9px;
                font-size: 14px;

                .order-refund-item-name {
                    line-height: 1.1rem;
                    font-size: 13px;
                }

                .order-item-refund-amount, .order-item-refund-reason {
                    display: flex;
                    align-items: flex-end;
                    line-height: 1rem;
                    margin-top: 6px;

                    .order-item-refund-amount-label, .order-item-refund-reason-label {
                        margin-right: 6px;
                    }
                }


            }
        }

        .order-item-actions {
            margin-top: 9px;
        }
    }
</style>
